<template>
	<a-drawer title="新增院系专业招生计划"  :width="windowWidth" placement="right" :closable="false" @close="onClose"
	 :visible="departmentsAddVisiable" style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
		<a-form :form="form" class="form">
			<a-form-item label='院系' v-bind="formItemLayout">
				<a-select :allowClear="true" showSearch optionFilterProp="children"  @click='yxChange' v-decorator="['zsyxm',{ rules: [{ required: true, message: '请选择院系' }] }]">
					<a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh+'-'+i.dwmc }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label='招生年度' v-bind="formItemLayout">
				<a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['zsnj',{ rules: [{ required: true, message: '请选择学年' }] }]">
					<a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-table ref="table" size="default" rowKey="key" bordered :columns="columns" :dataSource="data" :pagination="false">
				<template slot="plan" slot-scope="text, record">
					<a-input style="margin: -5px 0" :value="text.plan" @change="e => handleChange(record.key,'plan',e.target.value)" />
				</template>
			</a-table>
			<a-form-item label='备注' style="margin-top:20px">
				<a-textarea placeholder="请输入..." v-decorator="['note']" />
			</a-form-item>
		</a-form>
		<div class="drawer-bootom-button">
			<a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
			<a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
		</div>
	</a-drawer>
</template>

<script>
	// import moment from 'moment'
	import {
		STable
	} from '~'
	import {
		mapState
	} from 'vuex'

	const formItemLayout = {
		labelCol: {
			span: 3
		},
		wrapperCol: {
			span: 18
		}
	}

	const selectArr = ['TYPE0126']
	export default {
		name: 'DepartmentsAdd',
		props: {
			departmentsAddVisiable: {
				default: false
			}
		},
		components: {
			STable
		},
		data() {
			return {
				formItemLayout,
				windowWidth:"650",
				winWidth:"650",
				form: this.$form.createForm(this),
				loading: false,
				data: [{
					column: '总计划',
					plan: '',
					distribution: 0,
					key: 'zjh'
				}, {
					column: '学术学位计划',
					plan: '',
					distribution: 0,
					key: 'fzyxwjh'
				}, {
					column: '专业学位计划',
					plan: '',
					distribution: 0,
					key: 'zyxwjh'
				}],
				postParams: {

				},
				// 表头
				columns: [{
						title: '',
						dataIndex: 'column'
					},
					{
						title: '计划',
						scopedSlots: {
							customRender: 'plan'
						}
					},
					{
						title: '已分配',
						dataIndex: 'distribution'
					}
				],
				selectMenu: {
					yx: [] // 院系
				}
			}
		},
		computed: {
			...mapState({
				systemInfo: state => state.app.systemInfo,
				TYPE0126: state => state.app['TYPE0126'] // 年级
			})
		},
		beforeCreate() {
			this.form = this.$form.createForm(this)
		},
		mounted (){

			const that = this
			that.windowWidth = document.body.clientWidth>650?650:document.body.clientWidth
			console.log(that.windowWidth)
        	window.onresize = () => {
           	 return (() => {
				that.windowWidth = document.body.clientWidth
            })()
        }
		},
		watch:{
			windowWidth(val){
				this.windowWidth=val<650?val:650
				console.log(val)
			}
			// winWidth(val){
			// 	let that = this
			// 	setTimeout(function(){
			// 		if(val<650){
			// 			that.windowWidth=val;
			// 		}else{
			// 			that.windowWidth="650"
			// 		}
			// 	},400)
			// 	console.log(val)
			// }
		},
		created() {
			this.initSelectMenu()
			selectArr.forEach(v => {
				this.$store.dispatch('app/setDictionary', v)
			})
		},
		methods: {
			initSelectMenu() {
				let allRequest = [
					this.$api.base.collegeAll()
				]
				Promise.all(allRequest).then(res => {
					this.selectMenu.yx=res[0].data
					this.form.getFieldDecorator('zsyxm',{initialValue:res[0].data[0].dwh}) ;
				})
					this.$api.base.getSchoolYear().then(res=>{
						this.form.getFieldDecorator('zsnj',{initialValue:res.data.doctoralAdmissionYear}) ;

     				})

			},
			reset() {
				this.data = [{
					column: '总计划',
					plan: '',
					distribution: 0,
					key: 'zszjhrs'
				}, {
					column: '学士学位计划',
					plan: '',
					distribution: 0,
					key: 'fzyxwjhrs'
				}, {
					column: '专业学位计划',
					plan: '',
					distribution: 0,
					key: 'zyxwjhrs'
				}]
			},
			// 选择院系
			yxChange(code) {
				// this.$set(this.queryParam, 'sszym', '')
				this.$api.base.majorAll({
					lsdwh: code
				}).then(res => {
					this.$set(this.selectMenu, 'zy', res.data)
				})
			},
			// 选择招生年度
			zsndChange() {

			},
			// 关闭
			onClose() {
				this.reset()
				 this.form.resetFields()
				 this.initSelectMenu()
				this.$emit('close')
			},
			// 保存
			handleSubmit() {
				 this.form.validateFields( (err,values) => {
					if(err){
					this.$message.error("请选择必填项")
					}else{
				let paramms = Object.assign({
					zszjhrs: this.data[0].plan,
					fzyxwjhrs: this.data[1].plan,
					zyxwjhrs: this.data[2].plan
				}, this.form.getFieldsValue())
				// console.log(paramms)
				this.$api.doctorRecruit.collegeEnAdd(paramms).then(res => {
					// this.$message.success(res.msg)
					this.reset()
					this.$emit('success')

				}).finally(() => {
					this.loadingBtn = false

				})
					}
				 })
			},
			// 修改各计划人数人数
			handleChange(key, dataIndex, value) {
				const dataSource = [...this.data]
				const target = dataSource.find(item => item.key === key)
				if (target) {
					target[dataIndex] = value
					this.data = dataSource
				}
			}
		}
	}
</script>
